<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">商品管理</h3>

                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 350px;">
                        <input type="text" name="table_search" id="searchNameId"
                               class="form-control pull-right" placeholder="商品名">

                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
                            </button>
                            <button type="button" class="btn btn-default btn-add">添加</button>
                            <button type="button" class="btn btn-default btn-update">修改</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>商品名</th>
                        <th>地区</th>
                        <th>原价</th>
                        <th>现价</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>修改时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId"></tbody>
                </table>
            </div>
            <div id="pageId" class="box-footer clearfix">
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#pageId").load("doPageUI",function(){
            doGetObjects();
        });
        $(".input-group-btn")
            .on("click",".btn-search",doQueryObjects)
            .on("click",".btn-add,.btn-update",doLoadEditUI);
        $("tbody").on("click",".btn-valid",doValidById)
                  .on("click",".btn-delete",doDeleteById)
    });

    function doLoadEditUI(){
        //1.判定点击的对象
        var title;
        if($(this).hasClass("btn-add")){
            title="添加商品";
            doLoadPage(title);
        }else if($(this).hasClass("btn-update")){
            title="修改商品";
            var id=doGetCheckedId();
            console.log("id="+id)
            if(!id){
                alert("请先选择");
                return;
            }
            //基于id进行查询并加载编辑页面
            doFindObjectById(id,title);
        }
    }
    function doFindObjectById(id,title){
        //1.params
        var params={"id":id};
        //2.url
        var url="goods/doFindObjectById";
        //3.ajax request
        $.getJSON(url,params,function(result){//JsonResult
            if(result.state==1){
                $("#mainContentId").data("rowData",result.data);
                doLoadPage(title);
            }else{
                alert(result.message);
            }
        });
    }

    function doGetCheckedId(){
        return $("tbody input[name='radioId']:checked").val();
    }
    function doLoadPage(title){
        var url="goods/goods_edit"
        $("#mainContentId").load(url,function(){
            $(".box-title").html(title);
        })
    }

    //商品删除操作
    function doDeleteById(){
        var rowData=$(this).parents("tr").data("rowData");
        var id=rowData.id;
        var params={"id":id};
        var url="goods/doDeleteById";
        $.get(url,params,function (result) {
            if(result.state==1){
                alert(result.message);
                doGetObjects();//重新查询刷新
                //优化方式实现(局部刷新:修改button显示,修改td内容显示)
                //doEditRow(btn,rowData.state);
            }else{
                alert(result.message);
            }
        })
    }

    //下架和上架操作
    function doValidById(){
        //params
        var rowData=$(this).parents("tr").data("rowData");
        var id=rowData.id;
        var newValid=rowData.state?0:1;
        var params={"id":rowData.id,"valid":newValid};
        //url
        var url="goods/doValidById";
        //ajax request
        var btn=$(this);//获取点击的button对象
        $.post(url,params,function(result){
            if(result.state==1){
                alert(result.message);
                //doGetObjects();//重新查询刷新
                //优化方式实现(局部刷新:修改button显示,修改td内容显示)
                doEditRow(btn,rowData.state);
            }else{
                alert(result.message);
            }
        })
    }
    function doEditRow(obj,valid){
        //1.修改按钮上的内容
        $(obj).html(valid?"立即上架":"下架");
        //2.修改tr中第5个td中的内容(查询API文档)
        var tr=$(obj).parents("tr");
        tr.find("td:eq(5)").text(valid?"下架":"上架");
        //3.获取当前行tr对象，然后重新绑定新的值
        var rowData=tr.data("rowData")
        rowData.state=valid?0:1;
        tr.data("rowData",rowData);
    }
    //处理查询按钮事件
    function doQueryObjects(){
        $("#pageId").data("pageCurrent",1);
        doGetObjects();
    }
    //页面加载完成异步加载当前页数据
    function doGetObjects(){
        var url="goods/doFindPageObjects";
        var pageCurrent=$("#pageId").data("pageCurrent");
        if(!pageCurrent)pageCurrent=1;
        var params={"pageCurrent":pageCurrent}
        params.goodsname=$("#searchNameId").val().trim();
        console.log(params);
        $.getJSON(url,params,function(result){
            console.log(result);
            doHandleResponseResult(result);
        });
    }
    function doHandleResponseResult(result){
        if(result.state==1){
            doSetTableBodyRows(result.data.records);
            doSetPagination(result.data);
        }else{
            alert(result.message);
        }
    }
    //通过服务端返回的数据初始化页面
    function doSetTableBodyRows(data){
        //1.获取tbody对象，并清空内容
        var tBody=$("#tbodyId");
        tBody.empty();
        //2.迭代data内容将数据追加到tbody中
        for(var i in data){
            var tr=$("<tr></tr>");
            tr.data("rowData",data[i]);
            var tds=doCreateTds(data[i]);
            tr.append(tds);
            tBody.append(tr);
        }
    }
    function doCreateTds(row){
        console.log(row);
        var tds="<td><input type='radio' name='radioId' value='"+row.id+"' ></td>"+
            "<td>"+row.name+"</td>"+
            "<td>"+row.addr+"</td>"+
            "<td>"+row.originalPrice+"</td>"+
            "<td>"+row.price+"</td>"+
            "<td>"+(row.state?"上架":"下架")+"</td>"+
            "<td>"+new Date(row.createdTime).toLocaleString()+"</td>"+
            "<td>"+new Date(row.modifiedTime).toLocaleString()+"</td>"+
            "<td><button type='button' class='btn btn-danger btn-delete' value='"+row.id+"'>删除</button>&nbsp;&nbsp;&nbsp;&nbsp;" +
            "<button type='button' class='btn btn-default btn-valid'>"+(row.state?"下架":"立即上架")+"</button></td>";
        return tds;
    }
</script>




